<template>
  <div class="main-e">
    <el-card class="box-card">
      <div>
        <div class="button-right"><el-button type="primary" @click="reply" v-if="this.username === this.email.recipient">回邮件</el-button></div>
        <div class="top-container">
          <label class="topic">{{ email.title }}</label><br>
          发件人：{{ email.sender }}<br>
          时&nbsp;&nbsp;&nbsp;间：{{ email.sendTime }}<br>
          收件人：{{ email.recipient }}
        </div>
        <div class="left-container"><br>{{ email.message }}<br></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios, { AxiosError } from 'axios'
export default {
    name: 'Email',
    data(){
      return{
        email:{
          letterId:'',
          message:'',
          msgType:'',
          recipient:'',
          sendTime:'',
          sender:'',
          view:'',
          title:''
        },
        username:localStorage.getItem('username')
      }
    },
    methods:{
      //使用结构赋值进行异常处理
      promise_error_process(promise){
          return promise.then(data=>[null,data])
                          .catch(err=>[err,null])
      },
      async getEmailByAjax(){
        const response = await axios({
        url				      : 'http://127.0.0.1:8080/api/column/letter',
        method			    : 'GET',
        withCredentials : true,
        params        :{
          letterId : this.$route.params.letterId
        }
      })
        return response
      },
      async getEmail(){
        const [err,result] = await this.promise_error_process(this.getEmailByAjax())
        if(err){
          console.log(err)
        }
        else{
          console.log(result)
          this.email = result.data.data
        }
      },
      reply(){
        this.$router.push({name:'ReplyEmail', params:{sender:this.email.recipient,recipient:this.email.sender}})
      }
    },
    created(){
      this.getEmail()
    },
    watch: {
    '$route': {
      immediate: true,
      handler() {
        this.getEmail(); // 在路由参数变化时重新获取数据
      }
    }
  }
}
</script>

<style  scoped>
.main-e {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  position: absolute; /* 设置 test 为相对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.notice-heading {
  text-align: center; /* 文本居中 */
  font-weight: bold; /* 文本加粗 */
  font-size: 24px; /* 增大字体大小 */
}

.box-card {
  width: 80%;
  height: 60%;
}

.left-container {
  text-align: left;
}
.button-right {
  float: right; /* 将按钮右浮动 */
}
.topic{
  font-weight: bold; /* 文本加粗 */
  font-size: 16px; /* 增大字体大小 */
}
.top-container{
  text-align: left;
}
</style>